<template>
  <div class="sub-category">
    <img v-if="bannerImg" :src="bannerImg" class="banner" />
    <div class="title">- 全部分类 -</div>
    
    <div class="grid-container">
      <div 
        v-for="category in categories" 
        :key="category.id"
        class="grid-item"
        @click="onTapGridItem(category.id)"
      >
        <img 
          v-if="category.img" 
          :src="category.img" 
          class="img" 
          :alt="category.name"
        />
        <div v-else class="img-placeholder">
          {{ category.name.charAt(0) }}
        </div>
        <span class="text">{{ category.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  categories: {
    type: Array,
    default: () => []
  },
  bannerImg: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['itemtap'])

const onTapGridItem = (id) => {
  console.log('点击子分类:', id)
  emit('itemtap', { cid: id })
}
</script>

<style lang="scss" scoped>
.sub-category {
  padding: 15px;
  
  .banner {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
  }
  
  .title {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: 15px;
  }
  
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    
    .img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .img-placeholder {
      width: 60px;
      height: 60px;
      background: #f0f0f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #999;
      margin-bottom: 8px;
    }
    
    .text {
      font-size: 12px;
      color: #333;
      text-align: center;
    }
    
    &:hover {
      opacity: 0.8;
    }
  }
}
</style> 